<template>
  <view class="min-h-screen bg-[#f0f0f0] pb-4">
    <!-- 顶部图片区域 -->
    <image
      class="w-full h-96 object-cover"
      src="@/assets/imgs/shan.png"
      mode="aspectFill"
    ></image>

    <!-- <image
      class="w-full h-[500rpx] object-cover absolute left-0 top-40 z-20"
      src="@/assets/imgs/shui.png"
      mode="aspectFill"
    ></image> -->

    <!-- 内容卡片 -->
    <view
      class="w-[660rpx] mx-auto p-4 bg-white mt-[-172px] rounded-xl shadow-lg relative z-10 mb-10"
    >
      <!-- 功德水来源 -->
      <view
        class="flex items-center h-[72rpx] bg-[var(--color-m1)] rounded-[8rpx] mb-4"
      >
        <view class="bg-[#fff] h-full w-1 mx-8"></view>
        <view class="text-[32rpx] text-[var(--color-m2)]">寺庙介绍</view>
      </view>
      <view class="text-[36rpx] font-bold my-[20rpx]">{{ article.title }}</view>
      <view class="text-[28rpx] text-[#999] mb-4">{{ article.createtime }}</view>
      <image :src="getFullPath(article.image)" mode="widthFix" class="w-full mb-4" />
      <view class="text-gray-800 text-base mb-8" v-html="article.content"></view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import http from '@/utils/http';
import Taro, { useShareAppMessage, useShareTimeline } from '@tarojs/taro';
import { getFullPath } from '@/utils/config';

const article = ref({});

// 分享给好友
useShareAppMessage(() => {
  return {
    title: article.value.title || '佛学智慧每日一句',
    path: `/other/home/day-detail?id=${Taro.getCurrentInstance().router.params.id}`,
    imageUrl: article.value.image ? getFullPath(article.value.image) : '/assets/imgs/home.jpg'
  }
});

// 分享到朋友圈
useShareTimeline(() => {
  return {
    title: `${article.value.title || '佛学智慧每日一句'} - 修身养性好去处`,
    imageUrl: article.value.image ? getFullPath(article.value.image) : '/assets/imgs/home.jpg'
  }
});

// 模拟数据
onMounted(() => {
  http
    .post("/index.php/index/api/index", {
      Func: "getTempleDetail",
      data: {
        id: Taro.getCurrentInstance().router.params.id,
      }
    })
    .then((res) => {
      console.log("res", res);
      if(res?.error == 0) {
        article.value = res.data;
      }
    });
});

</script>

<style scoped>
/* 自定义样式 */
</style>
